<template>
	<view class="container">
		<view class="title">
			<text id="loginTitle">请登录</text>
			<rich-text :nodes="'<br>'"></rich-text>	
		</view>
		<view class="myFrom">
			<view class="myRow">
				<label for="userName">姓名：</label>
				<input class="myInput" id="userName" placeholder="请输入您的姓名" type="text" v-model="userName">
			</view>
			
			<rich-text :nodes="'<br>'"></rich-text>
			<view class="myRow">
				<label for="userName">密码：</label>
			<input class="myInput" id="userName" placeholder="请输入您的密码" type="password" v-model="password">
			</view>
			<rich-text :nodes="'<br>'"></rich-text>
			<view class="myRow">
				<text class="indexSelectInfo">登录身份：</text>
			<uni-data-select
					placeholder="请选择登录方式"
			      v-model="identity"
			      :localdata="range"
			    ></uni-data-select>
			</view>
			
			  </view>
			<rich-text :nodes="'<br>'"></rich-text>
			<view class="operationBox">
				<button class="loginBtn" @click="loginHandle">登录</button>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import {mapState, mapMutations} from "vuex";
	export default {
		data() {
			return{
				// 姓名
				userName:"",
				// 密码
				password:"",
				// 身份
				identity:"",
				// 下拉选项
				range: [
				    { value: 0, text: "我是医生" },
				    { value: 1, text: "我是学生" }
				]
			}
		},
		computed:{
			...mapState("my_user",["loginUserName"])
		},
		methods: {
			...mapMutations("my_user",['setUserName']),
			// 登录按钮触发
			loginHandle(){
				let that = this;
				if(this.identity === "" || this.password === "" || this.userName ===""){ 
					uni.showToast({
						title:"输入不能为空!",
						duration:1500,
						icon:'none'
					})
				}else if(this.identity === 0){
					// 医生登录检查
					// 发送请求，检查输入是否正确
					uni.request({
					    url: 'http://47.115.220.91:8787/commons/loginCheckOfDoctor?userName='+this.userName+'&password='+this.password, 
						method:"POST",
					    success: (res) => {
							// 登录成功，进行页面跳转
							res.data.code===1?that.toDoctorPage(): uni.showMsg(res.data.msg);
							
					    }
					});
				}else{
					// 学生登录检查
					uni.request({
					    url: 'http://47.115.220.91:8787/commons/loginCheckOfStudent?userName='+this.userName+'&password='+this.password, 
						method:"POST",
					    success: (res) => {
							// 登录成功，进行页面跳转
							res.data.code===1?that.toStudentPage(): uni.showMsg(res.data.msg);
					    }
					});
				}
			},
			// 页面跳转-学生页面
			toStudentPage(){
				// 向vuex中存储用户信息
				this.setUserName(this.userName);
				uni.navigateTo({
					url: '/pages/student/student'
				});
				// 清空输入框值
				this.userName = "";
				this.password = "";
				this.identity = "";
			},
			toDoctorPage(){
				// 向vuex中存储用户信息
				this.setUserName(this.userName);
				// 页面跳转
				uni.navigateTo({
					url: '/pages/doctor/doctor'
				});
				// 清空输入框值
				this.userName = "";
				this.password = "";
				this.identity = "";
			}
			
		}
	}
</script>

<style lang="scss">
	
	.indexSelectInfo{
		position: relative;
		top: 9px;
	}
	
	.uni-select__input-placeholder {
	    color: #f10934;
	    font-size: 12px;
	}
	
	.uni-select__input-text{
		color: white;
	}
	
	button{
		width: 60%;
		background-color: rgba(72,27,194, 0.2);
	}
	
	.myRow{
		display: flex;
	}
	
	label{
		display: inline-block;
		width: 50px;
	}
	
	page{
		font-family: "幼圆";
		// background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
		// 			linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),            
		// 			linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
		background-image: url('http://47.115.220.91:8787/commons/image?picName=indexBack.jpg');
		background-size: cover;
		font-weight: 700;
	}
	
	.loginBtn{
		margin-top: 5px	;
		font-weight: 700;
	}
	
	.title{
		font-size: 18px;
		margin-top: 2px;
		text-align: center;
		font-weight: 800;
	}
	
	.container{
		padding: 20px;
		margin-top: 50px;
		/* border: solid black; */
		background-color: rgba(229, 206, 255, 0.4);
	}
	
	.myFrom{
		padding: 2px;
		/* border: solid red; */
		display: flex;
		flex-direction: column;
		padding-left: 20px;
		width: 80%;
		margin: 0 auto;
	}
	
	.myInput{
		border: solid 2px #374a55;
		width: 80%;
	}
	
	
</style>
